<template lang="pug">
.logs
  .logs-filter
    header-filter(:filter="filter")
  .logs-table
    el-table(
      :header-cell-style="{ background: '#F3F3F3', fontSize: '14px', color: '#363636' }"
      style="width: 100%"
      :data="list"
      v-loading="loading"
      height="calc(100vh - 409px)"
      empty-text="未找到符合条件的内容"
    )
      el-table-column(label="序号" type="index", :index="indexMethod")
      el-table-column(label="操作账号" prop="userName")
      el-table-column(label="手机号" prop="mobile")
      el-table-column(label="用户角色" prop="roleName")
      el-table-column(label="日志类型" prop="type")
      el-table-column(label="操作" prop="content")
      el-table-column(label="时间" prop="operateTime")
    .logs-pagination
      .pagination-total 共 {{total}} 条
      .pagination-sizes 10 条/页
      el-pagination(
        background
        layout="prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="page"
        @current-change="currentChange"
      )
</template>

<script>
import headerFilter from '@/components/headerFilter'
import { getLogsList } from 'api'
export default {
  name: 'logs',
  components: {
    headerFilter
  },
  data () {
    return {
      filter: [
        [
          {
            name: '账号：',
            type: 'default',
            key: 'userName',
            userName: '',
          },
          {
            name: '手机号：',
            type: 'default',
            key: 'mobile',
            mobile: '',
          },
          {
            name: '角色：',
            type: 'select',
            key: 'roleId',
            roleId: '',
            handle: '',
            optLabel: 'roleName',
            optValue: 'supplierRoleId',
            options: []
          }
        ], [
          {
            name: '日志类型：',
            type: 'select',
            key: 'logs_type',
            logs_type: '',
            handle: '',
            optLabel: 'type',
            optValue: 'id',
            options: []
          },
          {},
          {
            type: 'handle',
            buttons: [
              { name: 'primary', label: '查询', handle: this.search },
              { label: '重置', handle: this.reset }
            ]
          }
        ]
      ],
      list: [],
      logTypeList: [],
      roleList: [],
      loading: false,
      total: 0,
      page: 1,
      pageSize: 10
    }
  },
  methods: {
    indexMethod (index) {
      return index + 1 + ((this.page - 1) * 10);
    },
    search () {
      let query = {}
      this.filter.map(row => row.map(v => {
        if (v[v.key]) query[v.key] = v[v.key]
      }))
      Object.keys(query).forEach(v => {
        if (!query[v]) delete query[v]
      })
      if (query.logs_type) {
        query.type = query.logs_type
        delete query.logs_type
      }
      this.$router.replace({ name: this.$route.name, query: { ...query, tm: new Date().getTime() } })
    },
    reset () {
      this.$router.replace({ name: this.$route.name })
    },
    async initFilter () {
      try {
        this.filter.forEach(row => row.forEach(v => {
          if (v.key === 'roleId') v.options = this.roleList
          if (v.key === 'logs_type') v.options = this.logTypeList
          if (v.key === 'logs_type') {
            v[v.key] = parseInt(this.$route.query['type']) || ''
          } else if (v.key === 'roleId'){
            v[v.key] = parseInt(this.$route.query[v.key]) || ''
          } else {
            v[v.key] = this.$route.query[v.key] || ''
          }
        }))
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    changeSelection (selection) {
      this.selection = selection
    },
    currentChange (page) {
      this.$router.replace({ name: this.$route.name, query: { ...this.$route.query, currentPage: page, tm: new Date().getTime() } })
    },
    async getList () {
      try {
        let query = { ...this.$route.query, currentPage: this.$route.query.currentPage || 1, pageLines: this.pageSize }
        const { ResultSet } = await this.$axios.post(getLogsList, { content: { ...query } })
        this.page = parseInt(this.$route.query.currentPage) || 1
        this.total = ResultSet.recordNumber
        this.logTypeList = ResultSet.userData.logTypeList
        this.list = ResultSet.userData.messageList
        this.roleList = ResultSet.userData.roleList
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(async vm => {
      await vm.getList()
      vm.initFilter()
    })
  },
  async beforeRouteUpdate (to, from, next) {
    next()
    await this.getList()
    this.initFilter()
  }
} 
</script>

<style lang="scss" scoped>
.logs {
  padding: 0 32px 16px;
}
.logs-filter {
  padding: 32px 0 16px;
  background: #fff;
  border-radius: 4px;
}
.logs-table {
  padding: 24px;
  background: #fff;
  border-radius: 4px;
  margin-top: 16px;
}
.logs-pagination {
  margin-top: 24px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  color: #7A7A7A;
  .pagination-total {
    margin-right: 10px;
  }
  .pagination-sizes {
    margin-right: 10px;
  }
}
</style>
